<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="../assets/images/logo.png">
  <title>博客详情</title>

  <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
  <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../assets/css/normalize.css">
  <link rel="stylesheet" href="../assets/css/detail.css">

  <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
  <script src="../node_modules/vue/dist/vue.min.js"></script>
  <script src="../node_modules/element-ui/lib/index.js"></script>
  <script src="../node_modules/jQuery/tmp/jquery.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
  <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
  <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="../assets/js/common.js"></script>
</head>

<body>
  <div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 80px">
      <div class="container">
        <a href="#">
          <img :src="a.articlePic" width="100%" alt=""/>
        </a>
      </div>
    </section>

    <section class="mt-3">
      <div class="container">
        <div class="card" style="background-color: white;">
          <div class="card-body">
            <div class="text-center">
              <h2 class="my-4">{{a.articleName}}</h2>
              <p>
                <i class="bi bi-folder2-open opacity-50"></i>
                <span class="card-text articleMsg">{{a.at?a.at.typeName:''}}</span>
                <i class="bi bi-tags opacity-50 ms-2"></i>
                <span class="card-text articleMsg">{{a.articleTag}}</span>
                <i class="bi bi-alarm opacity-50  ms-2"></i>
                <span class="card-text articleMsg">{{a.updateTime}}</span>
                <a href="#" class="card-link articleMsg ms-2">
                  <i class="bi bi-hand-thumbs-up-fill opacity-50"></i> {{a.articleStarNum}}
                </a>
                <i class="bi bi-book-half opacity-50 ms-2"></i>
                <span class="card-text articleMsg">{{a.articleReadCount}}</span>
              </p>
              <hr class="my-4" />
              <p class="text-start" v-html="a.articleContent">
                  
              </p>
            </div>
            <hr class="my-4" />
            <div>
              <h3>相关文章</h3>
              <ul class="list-group list-group-flush mb-3">
                <li class="list-group-item" style="border: none;" v-for="(a,index) in ra" :key="index">&bull;
                  <a :href="'blog-detail.html?'+a.id" class="text-info article">{{a.articleName}}</a>
                </li>
              </ul>


              <div style="background-color: #fafbfc;">
                <div class="d-flex">
                  <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2" />
                  <input class="form-control h-75 mt-3" placeholder="请输入评论..." />
                </div>
                <button type="button" class="btn btn-primary" style="width: 100px;margin-left: 55px;">发表评论</button>
              </div>

              <hr />

              <div>
                <div class="delBtn">
                  <i class="bi bi-trash3-fill"></i>
                </div>
                <div>
                  <div class="d-flex">
                    <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2" />
                    <div class="mt-1">
                      <span class="text-dark fw-bolder h6">游客:
                        <span> a5426793-a932-441d-8e4b-b089cfc7af41</span>
                      </span>
                      <br />
                      <span>2023-07-24 15:56:25</span>
                    </div>
                  </div>
                  <span style="margin-left: 55px;">这篇文章通俗易懂，我看受益匪浅</span>
                  <hr class="my-2" />
                </div>

                <div>
                  <div class="delBtn">
                    <i class="bi bi-trash3-fill"></i>
                  </div>
                  <div class="d-flex">
                    <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2" />
                    <div class="mt-1">
                      <span class="text-dark fw-bolder h6">游客:
                        <span> a5426793-a932-441d-8e4b-b089cfc7af41</span>
                      </span>
                      <br />
                      <span>2023-08-25 14:55:28</span>
                    </div>
                  </div>
                  <span style="margin-left: 55px;">这篇文章通俗易懂，我看受益匪浅</span>
                  <hr class="my-2" />
                </div>
              </div>
              <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                    d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
              <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                <p>转载声明：本博客由xxx创作。可自由转载、引用，
                  但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                </p>
                <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          id: null,
          a: {},//文章详情对象,也是文章对象,封装文章类型对象at
          ra:[]//得到相关文章的集合
        }
      },
      components: {
        // 将组件加入组件加库
        'my-header': httpVueLoader('./common/header.vue')
      },
      methods: {
        getAd() {//定义一个方法,写一个方法
          this.$http.get("/article/" + this.id).then(res => {
            //console.log(res);
            //给分类统计数组赋值
            this.a = res.data.data;
          }).catch(() => {
            this.$message.error("网络异常，请稍后重试！【400/404/...】");
          })
        },
        getRa() {//定义一个方法,写一个方法
          this.$http.get("/article/ra/" + this.id).then(res => {
            //console.log(res);
            //给分类统计数组赋值
            this.ra = res.data;
          }).catch(() => {
            this.$message.error("网络异常，请稍后重试！【400/404/...】");
          })
        }
      },
      mounted() {
        let url = location.href;
        this.id = url.substring(url.lastIndexOf("?") + 1);
        //alert(this.id);

        this.getAd();//调用一个方法,使用一个方法
        this.getRa();//调用一个方法,使用一个方法
      },
    })
  </script>

</body>

</html>